<template>
  <div style="margin-top: 80px" v-if="!isPC"></div>
  <el-row :gutter="10">
    <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
      <div style="display: flex;flex-direction: row;align-items: center;padding-top: 10px;position: fixed;top:50%;z-index: 999999;justify-content: center;">
        <div @click="openCollapse" style="cursor: pointer" v-if="!isCollapse">
          <svg t="1706843435878" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8985" width="30" height="30"><path d="M654.222222 192.142222L245.361778 512 654.222222 831.118222l-17.607111 22.215111L199.111111 512 636.899556 170.666667 654.222222 192.142222z" p-id="8986"></path></svg>
        </div>
        <div @click="closeCollapse" style="cursor: pointer;margin-left: 10px"  v-if="isCollapse">
          <svg t="1706843453176" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9141" width="30" height="30"><path d="M199.111111 192.142222L607.971556 512 199.111111 831.118222l17.607111 22.215111L654.222222 512 216.433778 170.666667 199.111111 192.142222z" p-id="9142"></path></svg>
        </div>
      </div>


      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :collapse="isCollapse1"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          id="knowledgeIndexMenu"
      >
        <el-sub-menu index="1" >
          <el-icon><setting /></el-icon>
          <template #title>素材</template>
          <el-sub-menu>
            <template #title><span>视觉动效</span></template>
            <el-menu-item index="1-1">图片</el-menu-item>
            <el-menu-item index="1-2">音效</el-menu-item>
            <el-menu-item index="1-2">视频</el-menu-item>
          </el-sub-menu>
          <el-sub-menu >
            <template #title><span>文辞文本</span></template>
            <el-menu-item index="1-3">古诗典赋</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>


        <el-sub-menu index="2" >
          <el-icon><setting /></el-icon>
          <template #title>技术</template>
          <el-sub-menu index="2-1">
            <template #title><span>前端技术</span></template>
            <el-menu-item index="2-1-1">item one</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2-2">
            <template #title><span>后端技术</span></template>
            <el-menu-item index="2-2-1">ElasticSearch</el-menu-item>
            <el-menu-item index="2-2-2">RabbitMQ学习笔记</el-menu-item>
            <el-menu-item index="2-2-3">企业微信开发</el-menu-item>
            <el-menu-item index="2-2-4">SpringCloud笔记</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2-3">
            <template #title><span>工具整合</span></template>
            <el-menu-item index="2-3-1">IDEA配置Gitee代码仓库</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>


        <el-sub-menu index="4">
          <el-icon><setting /></el-icon>
          <template #title>AI</template>
          <el-sub-menu index="4-1">
            <template #title><span>Stable Diffusion</span></template>
            <el-menu-item index="4-1-1">作品集</el-menu-item>
            <el-menu-item index="4-1-2">模型集</el-menu-item>
            <el-menu-item index="4-1-3">Prompt库</el-menu-item>
            <el-menu-item index="4-1-4">插件集</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4-2">
            <template #title><span>工具库</span></template>
            <el-menu-item index="4-2-1">Ai 导航</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>

        <el-sub-menu index="5">
          <el-icon><setting /></el-icon>
          <template #title>面试</template>
          <el-sub-menu index="5-1">
            <template #title><span>item four</span></template>
            <el-menu-item index="5-1-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>

        <el-sub-menu index="6">
          <el-icon><setting /></el-icon>
          <template #title>工具</template>
            <el-menu-item index="6-1-1">Xmind</el-menu-item>
            <el-menu-item index="6-1-2">抖音</el-menu-item>
            <el-menu-item index="6-1-3">投资</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
    <el-col :xs="21" :sm="21" :md="21" :lg="21" :xl="21">
      <router-view style="padding-left: 20px" refs="knowledgeIndexMenuRouterview"></router-view>
    </el-col>


  </el-row>

</template>

<script>
export default {
  name: "KnowledgeIndex",
  data(){
    return {
      isCollapse: false,
      isCollapse1:true,
      isPC: true
      // SearchIcon:this.$mhconfig.apiUrl+"/img/mhblog-logo.png"
    }
  },
  components: {},
  methods:{
    openCollapse(){
      this.isCollapse = true;
      var knowledgeIndexMenu =document.getElementById("knowledgeIndexMenu")
      knowledgeIndexMenu.style.display = "none";
    },
    closeCollapse(){
      this.isCollapse = false;
      var knowledgeIndexMenu =document.getElementById("knowledgeIndexMenu")
      knowledgeIndexMenu.style.display = "block";
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    showMessage(){
      this.$message('Hello ,Ele');
    },
    handleSelect(key){

      if(key == "2-2-1"){
        this.$router.push("/elasticSearch");
      }
      if(key == "2-2-2"){
        this.$router.push("/RabbitMq");
      }
      if(key == "2-2-3"){
        this.$router.push("/FileWechatDevel");
      }
      if(key == "2-2-4"){
        this.$router.push("/SpringCloundNote");
      }
      if(key == "2-3-1"){
        this.$router.push("/IDEAinstallGitCodeStore");
      }


      if(key == "4-1-1"){
        this.$router.push("/Aipaint");
      }
      if (key == "4-1-2"){
        this.$router.push("/AiModel");
      }
      if(key == "4-1-3"){
        this.$router.push("/promptstore");
      }
      if(key == "4-1-4"){
        this.$router.push("/sdextensions");
      }
      if(key == "4-2-1"){
        this.$router.push("/AiNavigate");
      }
      if(key == "6-1-1"){
        this.$router.push("/xmindIndex");
      }
      if(key == "6-1-2"){
        this.$router.push("/DouyinTool");
      }
      if(key == "6-1-3"){
        this.$router.push("/lottery");
      }

    },
    checkScreenWidth() {
      // 根据屏幕宽度判断是否为移动设备
      this.isPC = window.innerWidth <= 600; // 你可以根据实际需求设置阈值
    },
    knowledgeIndexMenuWith(){
      // var  menuwidth =this.$refs.knowledgeIndexMenu.offsetWidth
      // this.$refs.knowledgeIndexMenuRouterview.offsetWidth $('#').width = menuwidth
    }
  },
  mounted() {

    // 在组件挂载后检查屏幕宽度
    this.checkScreenWidth();
    // 添加屏幕尺寸变化的事件监听器
    window.addEventListener('resize', this.checkScreenWidth);
  },

}
</script>

<style scoped>
#knowledgeIndexMenu{
  z-index: 1000;
  position: fixed;
  overflow-y: auto;  /* 当菜单高度超过视口时启用滚动条 */
  height: 100%; /* 使菜单高度充满整个视口 */
  /*background-color: transparent !important;*/
}
#knowledgeIndexMenu .el-sub-menu{
  /*background-color: transparent !important;*/
}
</style>